---
slug: 移动断响应式布局 #路径，不能重复
title: 移动断响应式布局 # 标题
authors: [] # 作者，在authors.yml配置
tags: [facebook, hello, docusaurus] # 标签，在tags.yml配置
toc_min_heading_level: 2 # 最小展示标题
toc_max_heading_level: 5 # 最大展示标题
---

### 在`index.html` `head`标签加上

```html
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 user-scalable=no minimum-scale=1" />
```

1. `width=device-width` 将宽度缩小到设备宽度
2. `initial-scale=1` 初始缩放比例为1
3. `maximum-scale=1` 最大缩放比例为1
4. `user-scalable=no` 禁止用户手动缩放
5. `minimum-scale=1` 最小缩放比例为1


### rem布局

1. 给`html.fontSize`设置一个初始值
    ```css
        html{
            font-size: 100px;
        }
    ```
    * 这样1rem=100px

2. 在页面宽度变化时候算出页面宽度与rem的换算关系

    ```js
    (function (){
        const computed = ()=>{
            const html = document.documentElement;
            const clientWidth = html.clientWidth;
            const designWidth = 750;
            //比如说我们定的是750像素的宽度rem是100px
            //则换算公式就是 750/100 => 75 = clientWidth/?
            // => ? = clientWidth/(750/100) 除与一个数等于乘上这个数的倒数则
            const ratio = (clientWidth*100)/750;
            html.style.fontSize = ratio + 'px';
        };
        computed();
        document.addEventListener('resize',computed);
    })()

    ```
3. 我们一般还会给页面设置最大宽度750px，超过这个宽度，不再让REM比例继续变大




